<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- 标题 -->
	<title>点菜-PAD</title>
	<!-- 关键词 -->
	<meta name="keywords" content="" />
	<!-- 网站简介 -->
    <meta name="description" content="" />
    <!-- 自适应屏幕 -->
	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
	<!-- IE兼容 -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 最新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="css/bootstrap.css">
	<!-- 核心 CSS 文件 -->
	<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body onload="time()">
    <!-- Start index -->
    <div class="index">
        <div class="index-top">
            外婆家1号
        </div>
        <div class="index-center">
            <div class="row">
           	    <div class="col-sm-2">
           	        <div class="index-nav">
           	           <div id="showtime"></div>
           	           <p>上次操作员工10001</p>
           	        </div>
           	    </div>
           	    <div class="col-sm-2">
           	        <div class="index-nav nav-home">
           	            <a href="index.html" class="active">首页</a>
           	        </div>
           	    </div>
           	    <div class="col-sm-2">
	           	    <div class="index-nav nav-home">
	           	        <a href="#">设置打印机</a>
	           	    </div>
           	    </div>
           	    <div class="col-sm-2">
	           	    <div class="index-nav nav-home">
	           	        <a href="#">修改密码</a>
	           	    </div>
           	    </div>
           	    <div class="col-sm-2">
	           	    <div class="index-nav nav-home nav-pad">
	           	        <a href="pad-select.html">切换PAD</a>
	           	    </div>
           	    </div>
           	    <div class="col-sm-2">
	           	    <div class="index-nav nav-home">
	           	        <a href="#">退出登录</a>
	           	    </div>
           	    </div>
            </div>
        </div>
        
        <div class="diet-info clearfix">
        	<div class="diet-info-left">
        	    <div class="choice-people ">
        	        <div class="cp-title clearfix">
        	        	<div class="left">
        	    		桌号:桌4
	        	    	</div>
	        	    	<div class="right">
	        	    		人数：<b id="cpr"><i>20人</i></b><span id="edit">修改</span>
	        	    	</div>
        	        </div>
        	        <ul class="cp-num dn clearfix" id="cpnum">
        	        	<li>1人</li>
        	        	<li>2人</li>
        	        	<li>3人</li>
        	        	<li>4人</li>
        	        	<li>5人</li>
        	        	<li>6人</li>
        	        	<li>7人</li>
        	        	<li>8人</li>
        	        	<li>9人</li>
        	        	<li>10人</li>
        	        	<li>11人</li>
        	        	<li>12人</li>
        	        	<li>13人</li>
        	        	<li>14人</li>
        	        	<li>15人</li>
        	        	<li>16人</li>
        	        	<li>17人</li>
        	        	<li>18人</li>
        	        	<li>19人</li>
        	        	<li>20人</li>
        	        </ul>
        	    	
        	    </div>
        	     
                    
                <table class="table" style="margin-bottom:0">
                    <thead>
			            <tr>
				            <th style="width:100px">菜名</th>
				            <th>价格(元)</th>
				            <th style="width:80px">数量</th>
				            <!-- <th style="width:40px">单位</th> -->
				            <th>总价(元)</th>
			            </tr>
			        </thead>
				    <tbody id="J_order_list">
				        
				    </tbody>
                </table>
                
                <div class="" id="myOrder" style="">
                    <div style=" " class="" id="cartarea"> 
                        
                        
                    </div>
                    <div class="f-fix">
                        <div class="order_title">                          
                            <div class="clearfix foot_orderList">
                                <div class="left">
                                	<b>数量：</b><span style="font-size:16px;"class="num" id="num">0</span>
                                </div>
                                <div class="right">
                                	<b>总计：</b> ¥ <span class="price" id="price_txt">0</span>
                                </div>
                            </div>
                        </div>
                        <div class="oder_submit">                      
                            <button class="dw1" id="submitOrder">
                                <a>点菜</a>
                            </button>
                            <button class="dw2 dn" id="submitOrder">
                                <a href="">点菜</a>
                            </button> 
                            <button id="clearOder"class="button button-rounded button-flat">清空</button>
                        </div>
                    </div>
                   
                </div>      
               
        	</div>
        	<div class="diet-info-right">
        		<div class="left" id="J_menuList">
	        		
	        	</div>
	        	<div class="right">
	        		<form action="" method="post">
	        			<input type="text"  name="diet-mingzi" id="diet-mingzi" placeholder="输入菜名/菜品编号查询">
	        			<input type="submit" value="查询" id="diet-select">
	        		</form>
	        		<!-- 选项卡相对应的内容 -->
		            <div class="" id="J_list_Container">
		                 
			        </div>
	        	</div>
        	</div>

        </div>

    </div>
    <!-- End index -->

	<!-- jQuery文件 -->
	<script src="js/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="js/bootstrap.min.js"></script>
	 <script src="js/jquery.fly.min.js"></script><!--飞入购物车特效 js-->
    <script src="js/requestAnimationFrame.js"></script> <!--飞入购物车特效 js IE10以下-->
	<script language=Javascript> 
		function time(){
		    //获得显示时间的div
		    t_div = document.getElementById('showtime');
		   var now=new Date()
		    //替换div内容 
		   t_div.innerHTML = now.getFullYear()
		    +"年"+(now.getMonth()+1)+"月"+now.getDate()
		    +"日 "+now.getHours()+":"+now.getMinutes();
		    //等待一秒钟后调用time方法，由于settimeout在time方法内，所以可以无限调用
		   setTimeout(time,1000);
		  }
	</script>
    <script>
		$(document).ready(function(){					
			$("#cpnum li").click(function () {
				$("#cpr i").addClass("dn");
				$(this).addClass("show").siblings().removeClass("show");
		        {
					var copyThisC = $(this).clone();
					if ($("#selectC").length > 0) {
						$("#selectC").html($(this).text());
					} else {
						$("#cpr").append(copyThisC.attr("id", "selectC"));
					}
				}
			});
			$("#edit").click(function () {
                $("#cpnum").removeClass("dn");
			});
		});
   </script>
   <script>

    var iG = iG||{};
    var num = 0;
    if(window.localStorage)
    {
        try{
            iG = JSON.parse(localStorage["zaiG"])||{};
            }catch(e){
                localStorage.removeItem("zaiG");
                iG = iG||{};
                }
    }
    else{
            iG = iG||{};
        }
    $(function(){

    setTimeout(function () { window.scrollTo(0, 1); }, 0); 
    setTimeout(function () {
        iG["order"] = {};
       
        iG.items={
        	"所有分类":
            [   {id:"1",discount:"8.8",name:"芒果布丁芒果芒",danwei:"份",cls:"前菜",intr:"甜甜糯糯，管饱。上好糯米蒸制",price:"150.55"},
                {id:"2",discount:"",name:"芒果布丁1",danwei:"份",cls:"前菜",intr:"前菜2",price:"10"},
                {id:"3",discount:"",name:"芒果布丁2",danwei:"份",cls:"热菜",intr:"前菜3",price:"888"},
                {id:"4",discount:"9.0",name:"芒果布丁3",danwei:"份",cls:"热菜",intr:"前菜4",price:"153"},
                {id:"5",discount:"",name:"芒果布丁4",danwei:"份",cls:"饮料",intr:"前菜5",price:"152"},
                {id:"6",discount:"",name:"芒果布丁5",danwei:"份",cls:"饮料",intr:"前菜6",price:"154"},
                {id:"7",discount:"",name:"芒果布丁6",danwei:"份",cls:"饮料",intr:"前菜7",price:"151"},
                {id:"8",discount:"",name:"芒果布丁7",danwei:"份",cls:"饮料",intr:"前菜8",price:"152"},
                {id:"9",discount:"",name:"芒果布丁4",danwei:"份",cls:"饮料",intr:"前菜5",price:"152"},
                {id:"10",discount:"",name:"芒果布丁5",danwei:"份",cls:"饮料",intr:"前菜6",price:"154"},
                {id:"11",discount:"",name:"芒果布丁6",danwei:"份",cls:"饮料",intr:"前菜7",price:"151"},
                {id:"12",discount:"",name:"芒果布丁7",danwei:"份",cls:"饮料",intr:"前菜8",price:"152"}
            ],
            "前菜":
            [   {id:"1",discount:"8.8",name:"芒果布丁芒果芒",danwei:"份",cls:"前菜",intr:"甜甜糯糯，管饱。上好糯米蒸制",price:"150.55"},
                {id:"2",discount:"",name:"芒果布丁1",danwei:"份",cls:"前菜",intr:"前菜2",price:"10"}
            ],
            "热菜":
            [   {id:"3",discount:"",name:"芒果布丁2",danwei:"份",cls:"热菜",intr:"前菜3",price:"888"},
                {id:"4",discount:"9.0",name:"芒果布丁3",danwei:"份",cls:"热菜",intr:"前菜4",price:"153"}
            ],
            "饮料":
            [   {id:"5",discount:"",name:"芒果布丁4",danwei:"份",cls:"饮料",intr:"前菜5",price:"152"},
                {id:"6",discount:"",name:"芒果布丁5",danwei:"份",cls:"饮料",intr:"前菜6",price:"154"},
                {id:"7",discount:"",name:"芒果布丁6",danwei:"份",cls:"饮料",intr:"前菜7",price:"151"},
                {id:"8",discount:"",name:"芒果布丁7",danwei:"份",cls:"饮料",intr:"前菜8",price:"152"},
                {id:"9",discount:"",name:"芒果布丁4",danwei:"份",cls:"饮料",intr:"前菜5",price:"152"},
                {id:"10",discount:"",name:"芒果布丁5",danwei:"份",cls:"饮料",intr:"前菜6",price:"154"},
                {id:"11",discount:"",name:"芒果布丁6",danwei:"份",cls:"饮料",intr:"前菜7",price:"151"},
                {id:"12",discount:"",name:"芒果布丁7",danwei:"份",cls:"饮料",intr:"前菜8",price:"152"}
            ]
        };
        init();//ajax成功后执行init(); 
        }, 20);//模拟ajax请求时间
            
    $("body").on("click",".list_id_respone ",function(){
        iG["order"] = iG["order"]||{};
        var index = $(this).attr("data_id");
 
        <!--标签+1-->
        var n=$("#num").text();
        n++;
        $("#num").text(n);
                
            
        if(iG.order[index])
        {
            iG.order[index].counter = iG.order[index].counter + 1;
        }else{
            var obj = getIndex(index);
            iG.order[index] = obj;
            iG.order[index].counter = 1;
            }
        if(window.localStorage)
        {
            localStorage["zaiG"] = JSON.stringify(iG);
        }
        $("#price_txt").html(countPrice() + "");
        $("#J_order_list").html(buildOrder(iG.order));
    });
              

   
 
    $("body").on("click",".list_add strong",function(event){
        $(".dw1").addClass("dn");
        $(".dw2").removeClass("dn");
        $("#J_order_list").html(buildOrder(iG.order));
    });

    $("#myOrder").click(function(){
        $("#J_order_list").html(buildOrder(iG.order));
        $("#price_txt").html(countPrice() + ""); 
     
    });
 
  
    $("body").on("click",".counter_plus",function(){
        iG["order"] = iG["order"]||{};
        var index = $(this).attr("data_id");
                        
        //by zhou标签+1
        var n1=$("#num").text();
        n1++;
        $("#num").text(n1);
                        
                        
        if(iG.order[index]){
            iG.order[index].counter = iG.order[index].counter + 1;
        }else{
            var obj = getIndex(index);
            iG.order[index] = obj;
            iG.order[index].counter = 1;
        }
        $(this).siblings(".nocounter").html(iG.order[index].counter);
        $("#price_txt").html(countPrice() + "");
        if(window.localStorage){
            localStorage["zaiG"] = JSON.stringify(iG);
        }
        $("#J_order_list").html(buildOrder(iG.order));
    });
    
    
    $("body").on("click",".counter_minus",function(){

        //by zhou标签-1
        var n2=$("#num").text();
        if(n2 == 0)return;
        if(n2 >0){ 
            n2--;
            $("#num").text(n2);  
        }
        
        $.ajax(
            {
                type:"post",
                dataType:"json",
                url:"car?action=minus",
                success:function(result){
                }
            }
        )
                
        iG["order"] = iG["order"]||{};
        var index = $(this).attr("data_id");
        if(iG.order[index].counter === 0)return;
        if(iG.order[index]){
            iG.order[index].counter = iG.order[index].counter - 1;
        }else{
            var obj = getIndex(index);
        iG.order[index] = obj;
            iG.order[index].counter = 1;
            }
        $(this).siblings(".nocounter").html(iG.order[index].counter);
        $("#price_txt").html(countPrice() + "");
        if(window.localStorage){
            localStorage["zaiG"] = JSON.stringify(iG);
        }
        $("#J_order_list").html(buildOrder(iG.order));
    });
        
    $("body").on("click","#clearOder",function(){
        iG["order"] = {};
        //标签清零
        var n=0;
        $("#num").text(n);
        $.ajax(
                {
                    type:"post",
                    dataType:"json",
                    url:"car?action=clear",
                    success:function(result){
                        //iG.items = result;
                        //init();//ajax成功后执行init();
                    }
                }
            )
            
        $("#J_order_list").html(buildOrder(iG.order));
        $("#price_txt").html(countPrice() + "");

        if(window.localStorage){
            localStorage["zaiG"] = JSON.stringify(iG);
        }
        $(".dw2").addClass("dn");
        $(".dw1").removeClass("dn");
    });
    
    //点击菜品分类，显示对应菜品
    $("body").on("click","#J_menuList li ",function(){
        iG.indexMenu = $(this).attr("data_name");
        $("#J_list_Container").html(listManger(iG.items));
        $("#J_menuList .active").removeClass("active");
        $(this).addClass("active");
    });

    });
    //初始化加载隐藏
    function init(){
        setMenu(iG.items);
        $("#J_list_Container").html(listManger(iG.items));  
    }

    //设置菜单   
    function setMenu(_list){
        iG.menu = [];
        iG.indexMenu = (function(){
            var menu;
            var count = 0;
            for(var i in _list){
                if(count===0){
                    menu =  i;
                }
                count++;
                iG.menu.push(i);
            }
            return menu;
        })();
        buildMenu(iG.menu);
    }


    //菜单列表显示
    function buildMenu(_list){
        var menuHtml = "<ul>";
        var active;
        for(var i in _list){
            active = "";
            if(_list[i]===iG.indexMenu)active = "active";
                menuHtml += "<li class=\""+active+"\" data_name=\""+ _list[i] +"\"><a data_name=\""+ _list[i] +"\">"+ _list[i] +"</a></li>"
            }
            menuHtml += "</ul>";
        $("#J_menuList").html(menuHtml);
    }

    //放大菜品的样式    
    function getIndex(_id){
        var indexList = iG.items[iG.indexMenu];
        for(var i in indexList){
            if(indexList[i].id===_id){
                return indexList[i]
            }
        }
    }

        
    function countPrice(){
        var price = 0;
        for(var i in iG.order){
            price += Number(iG.order[i].price)*iG.order[i].counter;
        }
        return price.toFixed(2);
    }


    
    //菜品显示
    function listManger(_list){
        var result = "";
        var listArr = [];
        var indexList = _list[iG.indexMenu];
        for(var i in indexList){
            listArr.push(indexList[i]);
            if(Math.floor(i/3)===0&&i>2){
                result += "<div class=\"row diet-all clearfix\">";
                result += buildList(listArr);
                result += "</div>";
                listArr = [];
            }
        }
        result += "<div class=\"row diet-all clearfix\">";
        result += buildList(listArr);
        result += "</div>";
        return result;
    }

    //显示菜品内容    
    function buildList(_list){;
        var result = "";
        for(var i in _list){
            if(_list[i].discount==""){
            	result +="<div class=\"diet-list\"><div class=\"diet-list-name\">"+_list[i].name+"</div><div class=\"diet-list-price\">¥"+_list[i].price+"/"+_list[i].danwei+"</div><div class=\"btn_wrap\"><button class=\"minus\" style=\"display: none;\"><strong></strong></button><i style=\"\"></i><button class=\"list_add list_id_respone diet-list-diancai\" data_id=\""+_list[i].id+"\"><strong >点菜</strong></button><em class=\"fixBig  fake\"></em></div></div>"; 
                
            }
            else{
                result +="<div class=\"diet-list\"><div class=\"diet-list-name discount\">"+_list[i].name+"<span>"+_list[i].discount+"折</span></div><div class=\"diet-list-price\">¥"+_list[i].price+"/"+_list[i].danwei+"</div><div class=\"btn_wrap \"><button class=\"minus\" style=\"display: none;\"><strong></strong></button><i style=\"\"></i><button class=\"list_add list_id_respone diet-list-diancai\" data_id=\""+_list[i].id+"\"><strong >点菜</strong></button><em class=\"fixBig  fake\"></em></div></div>"; 


            }
                          
        } 
        return result;
    }
        
    function buildOrder(_list){
        var result = "";
        var check = true;
        for(var i in _list){
            if(_list[i].counter === 0)continue;
                        check = false;
                        result += "<tr><td>"+_list[i].name+"</td><td>"+_list[i].price+"</td><td><div class=\"btn_wrap btnp counter\"><button class=\"list_minus counter_minus fl\" style=\"display: inline-block;\" data_id=\""+_list[i].id+"\" ontouchstart=\"\"><strong></strong></button><i class=\"nocounter fl\" style=\"display: inline-block;\">"+_list[i].counter+"</i><button class=\"list_add counter_plus\" data_id=\""+_list[i].id+"\" ontouchstart=\"\"><strong></strong></button><em class=\"fixBig  fake\"></em></div></td><td>"+_list[i].price+"*"+_list[i].counter+"</td></tr>";
                }
                if(check){
                        result += "<span>你还没有点菜呢</span>";

        }
        result += "";
        return result;
    }
        
</script> 

</body>
</html>